<template>
    <!-- 个人中心头部 -->
    <div class="box">
        <div class="msg">
          <van-image @click="Login" class="img" round width="95px" height="95px" :src="imgUrl" />
            <div class="txt">
                <p @click="Login" style="font-weight: 900;margin:0;font-size: 18px;">
                    {{userName?userName:"尚未登录"}}
                </p>
            </div>
        </div>
    </div>
    <!-- 个人中心 -->
    <van-cell-group>
     <van-cell center is-link @click="userInfo">
       <template #title>
         <van-icon name="userInfo" />&nbsp;
         <span class="custom-title">个人信息</span>
       </template>
     </van-cell>
     <van-cell center is-link>
       <template #title>
         <van-icon name="shou" />&nbsp;
         <span class="custom-title">我的收藏</span>
       </template>
     </van-cell>
     <van-cell center is-link>
       <template #title>
         <van-icon name="newpass" />&nbsp;
         <span class="custom-title">修改密码</span>
       </template>
     </van-cell>
     <van-cell  @click="seeting" center is-link>
       <template #title>
         <van-icon name="setting" />&nbsp;
         <span class="custom-title">设置</span>
       </template>
     </van-cell>
    </van-cell-group>
    
    <!-- 点击“设置”出现的弹窗 -->
    <van-action-sheet v-model:show="show" :actions="actions" cancel-text="取消" close-on-click-action @cancel="onCancel"
        @select="showTag" />

    <!-- 修改密码的弹窗 -->
    <van-popup v-model:show="ishow" style="padding: 20px;" position="bottom" :style="{ height: '42%' }">
        <van-cell-group style="margin-top: 10px;" inset>
            <van-field v-model="oldpassword" type="password" label="原始密码" placeholder="请输入原始密码" input-align="right" />
        </van-cell-group>
        <van-cell-group style="margin-top: 10px;margin-bottom: 50px;" inset>
            <van-field v-model="password" type="password" label="新的密码" placeholder="请输入新的密码" input-align="right" />
        </van-cell-group>
        <van-button type="primary" @click="EditMima" size="large">确认修改</van-button>
    </van-popup>

    


</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
// 导入发送请求获取个人信息的方法
import { getSelfMsg,getSelfMsg1, EditMi } from '../api/api'
import { showConfirmDialog } from 'vant';
const router = useRouter()
// 前往登录页面
const Login = () => {
    localStorage.getItem('tokey') ? null : router.push('/login')
}

//前往个人信息页面
const userInfo = (userid:any) => {
    localStorage.getItem('tokey') ? router.push({path:'/userInfo/',query: { params: userid } }) : showToast('请先登录！')
}

// 修改密码弹窗的显示空间
const ishow = ref(false)
// const password = ref('')
const oldpassword = ref('')
const EditMima = async () => {
    let ret = await EditMi(userid.value, oldpassword.value, password.value)
    showToast(ret.data.pass)
    console.log(ret)
    // 关闭弹窗
    ishow.value = !ishow.value
    // 刷新页面
    location.reload()
}

// “设置”弹窗的相关设置
const show = ref(false);
const actions = [
    { name: '修改密码' },
    { name: '退出登录' },
];
const seeting = () => {
    localStorage.getItem('tokey') ? show.value = !show.value : showToast('请先登录！')
}
const onCancel = () => showToast('取消成功');
const showTag = (action: any) => {
    if (action.name === '退出登录') {
        showConfirmDialog({
            title: '提示',
            message:
                '你确定要退出了吗？',
        })
            .then(() => {
                localStorage.removeItem('tokey')
                localStorage.removeItem('userName')
                localStorage.removeItem('stuNo')
                showToast('退出登录成功')
                location.reload()
            })
            .catch(() => showToast('取消成功'))
    } else if (action.name === '修改密码') {
        ishow.value = !ishow.value
    }
}


// 用户个人信息-头像
const imgUrl = ref('')
// 用户个人信息-学号
const stuNo = ref('')
// 用户个人信息-userid
const userid = ref('')
// 用户个人信息-密码
const password = ref('')
// 用户个人信息-用户名
const userName = ref('')
// 发送请求获取个人信息
onMounted(async () => {
  // let res = await getSelfMsg()
  let res1 = await getSelfMsg1()
    // console.log(res, 6666)
    console.log(res1, 444)
    // console.log(res1.data.data.userName, 333)
    if (res1.data.code === 0) {
        // showToast(res.data.pass)
        userName.value = res1.data.data.userName
        stuNo.value = res1.data.data.stuNo
        userid.value = res1.data.data.id
        password.value = res1.data.data.password
        localStorage.setItem('userName', userName.value)
        localStorage.setItem('stuNo', stuNo.value)
        window.localStorage.setItem("userid", userid.value) 
        // localStorage.setItem('userid',userid.value)
        router.push('/center')
    } else {
      showToast(res1.data.msg)
    }
});

</script>

<style scoped>
.box {
    width: 100%;
    height: 200px;
    position: relative;
    background: linear-gradient(#1989fa, transparent);
}

.user {
    width: 95%;
    height: 60px;
    left: 0;
    bottom: 0;
    margin: 0 9px 0 9px;
    position: absolute;
    border-radius: 10px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box .msg .img {
    top: 25px;
    left: 20px;
    position: absolute;
}

.box .msg .txt {
    top: 47px;
    left: 125px;
    position: absolute;
}
.serve{
    padding-bottom: 50px;
}
</style>